<template>
	<!-- 首页页面 -->
	<view class="container" :style="{ overflow: overlayNum > 0 ? 'hidden' : '' }">
		<!-- 遮罩层 -->
		<view class="overlay" v-show="overlayNum > 0"></view>
		<!-- 淘宝小程序不需要 -->
		<!-- #ifndef MP-ALIPAY -->
		<!-- 头部组件 -->
		<HomeNavbar :bgColor="page.nav_color" @isVisible='toggleVisibility' searchType="box"
			:theme="scrollTop > 200 ? 'white' : ''"></HomeNavbar>
		<!-- #endif -->
		<!-- 轮播图 -->
		<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in info" :key="index">

					<image class="swiper-item-img" :src="item.slideShows" mode="aspectFill"
						@click="goswiperUrl(item.link)"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 一元夺宝 -->
		<view class="snatch-treasure" @click="treasure()">
			<image :src="activityImg" mode="aspectFill">
			</image>
			<!-- <image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E7%BB%84%203652.png" mode="">
			</image>
			<text class="raiders">一元夺宝</text>
			<text class="convert">一元兑换福利</text>
			<view class="raiders-btn">
				点击夺宝
			</view> -->
		</view>
		<!-- 进页面弹窗 -->
		<view class="popu" v-if="isPopupVisible && redContent">
			<view class="pick-up-item">
				<view class="top">
					<view class="left">
						{{ redContent.discountMoney }}
					</view>
					<view class="right">
						<view class="manjian">
							满{{ redContent.minimumMoney }}元可用
						</view>
						<view class="youhui">
							可与其他优惠叠加
						</view>
					</view>
				</view>
				<view class="bottom">
					等你来拿 <image class="right"
						src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%9C%86%E5%BD%A2%E5%8F%B3%E7%AE%AD%E5%A4%B4.png"
						mode=""></image>
				</view>
			</view>
			<view class="free-offer" @click="addRedpackUser()">
				立即免费领取
			</view>
			<view class="bottom">
				<image @click="closePopuped('mf')"
					src="https://zsw-bimface-res.izsw.net/img/bim-community/%E9%94%99%E5%8F%B7.png" mode=""></image>
			</view>
		</view>
		<!-- 扫码弹窗内容 -->
		<view class="qr-code-popup" v-if="qrCodeVisible">
			<view class="closed">
				<image @click="closePopuped('sm')"
					src="https://zsw-bimface-res.izsw.net/img/bim-community/%E9%94%99%E5%8F%B7%20(1).png" mode="">
				</image>
			</view>
			<image class="erweima" :src="codeImg" mode=""></image>
			<!--   <view class="collect">
		   	点击领取
		   </view> -->
			<view class="win">
				点击赢取 iphone15
			</view>
		</view>
		<!-- tab组件 -->
		<IndexTab :key="componentKey" :isVisible=isVisible :tab="tab" />

	</view>
</template>

<script>
import IndexTab from '@/components/IndexTab/index.vue';
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
export default {
	components: {
		IndexTab,
	},
	data() {
		return {
			isVisible: false, //列表显示状态
			scrollTop: 0,
			popupSetting: {
				number: ''
			},
			componentKey: 0,
			isShowPopupKey: true,
			isShowCouponPopupKey: true,
			danmuSetting: {},
			danmuList: [],
			refreshCounter: 0,
			getNextPageCounter: 0,
			showOverlay: true, // 控制遮罩层显示与隐藏
			info: [
				{ img: "" },
				{ img: "" }
			],
			current: 0,
			mode: 'dot',
			autoPlayInterval: null, // 用于存储定时器的变量
			isPopupVisible: false, //弹窗显隐
			qrCodeVisible: false, //扫码弹窗显隐
			//客服照片
			codeImg: '',
			overlayNum: 0, //需要遮罩的数量,
			//活动专区图
			activityImg: '',
			// 一元夺宝期号
			issueId: "",
			snatchActivity: false,
			//商城开启状态
			isShowShop: 0,
			//玩家市场开启状态
			isShowGame: 0,
			tab: null
		}
	},
	computed: {
		page() {
			return this.$store.getters.setting.box_home
		},
		// 普通弹窗
		isShowPopup() {
			let flag = uni.getStorageSync('popup_' + this.popupSetting.number)
			return this.popupSetting.is_enabled && this.isShowPopupKey && !flag
		},
		// 优惠券弹窗
		isShowCouponPopup() {
			let flag = uni.getStorageSync('coupon_popup' + this.$store.getters.setting.coupon_popup.number)
			return this.$store.getters.setting.coupon_popup.is_enabled && this.isShowCouponPopupKey && !flag
		},
		userInfo() {
			return this.$store.getters.userInfo
		}
	},
	watch: {},
	onLoad(e) {
		this.tab = e.activeTab
		this.$visitor.record('box_index');
		// uni.setTabBarBadge({
		// 	text: '2',
		// 	index: 2
		// })
		this.getDanmu();
		this.selectNewRedPack();
		//客服照片
		this.selectQrCodes();

	},
	// 下拉刷新操作
	onPullDownRefresh() {
		this.$showPullRefresh().then(res => {
			console.log(res);
			this.refreshCounter++
		})
		//this.getPopup()
		//this.getDanmu()
	},
	onReachBottom() {
		this.getNextPageCounter++
		// console.log('reach bottom')
	},
	onShow() {
		// 在页面显示时启动自动播放
		this.startAutoPlay();
		this.getImageIndex();
		this.selectHome();
		this.participate();
		this.getShop();
		this.selectIssue();
		this.selectyydb();
		this.selectDelUserMessage();
		this.componentKey += 1;
	},
	onHide() {
		// 在页面隐藏时清除定时器
		this.stopAutoPlay();
	},
	methods: {
		//首页查询商城是否关闭
		getShop() {
			this.$http('/function_switch/all').then(res => {
				this.isShowShop = res.data[1].type
				this.isShowGame = res.data[0].type
				if (this.isShowShop == 0) {
					uni.showTabBar()
					uni.setTabBarItem({
						index: 1,
						visible: false
					})
				}
				if (this.isShowGame == 0) {
					uni.showTabBar()
					uni.setTabBarItem({
						index: 2,
						visible: false
					})
				}
			})
		},
		// 首页查询注销申请驳回原因
		selectDelUserMessage() {
			this.$http('/deleteUsers/selectDelUserMessage').then(res => {
				if (res.message) {
					let that = this
					uni.showModal({
						title: '温馨提示',
						content: '您的注销被驳回，驳回原因：' + res.message,
						success: function (res) {
							if (res.confirm) {
								// 确定的时候调用已读过注销原因
								that.$http("/deleteUsers/readDelUserMessage", "post").then(res => { })
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				}

			})
		},
		//首页轮播方法
		getImageIndex() {
			this.$http('/deleteUsers/selectSlideShow').then(res => {
				this.info = res.data;
			})
		},
		goswiperUrl(url) {
			uni.redirectTo({
				url: url
			})
		},
		// 一元夺宝查询期号id
		selectIssue() {
			this.$http('/snatchActivity/selectIssue', 'get').then(res => {
				this.issueId = res.data.id;
				$setStorage("issueId", this.issueId)
			})
		},
		//一元夺宝查询是否开奖并且用户已参与
		participate() {
			this.$http('/snatchActivity/participate', 'get', {
				userId: this.userInfo.id,
				issueId: $getStorage("issueId")
			}).then(res => {
				if (res.data == true) {
					let participate = $getStorage("participate") ? $getStorage("participate") : false
					console.log("participate", participate)
					if (!participate) {
						uni.showModal({
							title: '一元夺宝已开奖',
							content: "前往查看开奖结果",
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/TreasureHunt/index"
									})
									$setStorage("participate", true)
								} else {
									console.log('点击了取消')
								}
							}
						})
					}
				}
			})
		},
		//查询一元夺宝是否活动已开始
		selectyydb() {
			this.$http('/snatchActivity/selectyydb', 'get', {
				userId: this.userInfo.id,
				issueId: $getStorage("issueId")
			}).then(res => {
				if (res == true) {
					let selectyydb = $getStorage("selectyydb") ? $getStorage("selectyydb") : false
					console.log("selectyydb", selectyydb)
					if (!selectyydb) {
						uni.showModal({
							title: '一元夺宝活动已开始',
							content: "请前往一元夺宝页面参加活动",
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/TreasureHunt/index"
									})
									$setStorage("selectyydb", true)
								} else {
									console.log('点击了取消')
								}
							}
						})
					}
				}else {
					$removeStorage("selectyydb")
				}
			})
		},
		//查询用户是否领取过新用户红包
		selectNewRedPack() {
			this.$http('/zb-redpacket-user/selectNewRedPack', "get", {
				userId: this.userInfo.id
			}).then(res => {
				if (res.data.info == '用户还未领取') {
					this.redpackInfo = res.data.info
					this.isPopupVisible = true
					this.overlayNum += 1;
					this.selectZbRedPacket()
				} else {
					this.isPopupVisible = false
				}

			})
		},
		//查询新人红包信息
		selectZbRedPacket() {
			this.$http('/zb-redpacket-user/selectZbRedPacket').then(res => {
				this.redContent = res.data.info
				if (!res.data.info) {
					this.isPopupVisible = false
					this.overlayNum -= 1;
				}
			})
		},
		//领取新人红包
		addRedpackUser() {
			this.$http('/zb-redpacket-user/addRedpackUser?title=' + this.redContent.title, "post", {
				userId: this.userInfo.id,
				id: this.redContent.id
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: "领取成功，已放入您的背包",
						icon: "none",
						duration: 3000,
					})
					this.isPopupVisible = false
					this.overlayNum -= 1;
				}
			})
		},
		//关闭弹窗 
		closePopuped(type) {

			if (type == "mf") {
				this.isPopupVisible = false
				//	this.qrCodeVisible = true
			} else {
				this.qrCodeVisible = false
				$setStorage("qrCodeVisible", true)
			}
			console.log(this.qrCodeVisible);


			this.overlayNum -= 1;
		},
		//客服照片
		selectQrCodes() {
			let qrCodeVisible = $getStorage("qrCodeVisible") ? $getStorage("qrCodeVisible") : false

			if (!qrCodeVisible) {
				this.$http('/deleteUsers/selectQrCodes', "get").then(res => {
					if (res.code == 200) {
						$setStorage("qrCodeVisible", true)
						this.codeImg = res.data.info.qrCode
						this.qrCodeVisible = $getStorage("qrCodeVisible")
						console.log("qrCodeVisible", $getStorage("qrCodeVisible"));
						this.overlayNum += 1;
					}
				})
			}
		},
		toggleVisibility() {
			this.isVisible = !this.isVisible;
		},
		// 
		getDanmu() {
			this.$http('/danmus/home').then(res => {
				this.danmuSetting = res.data.setting
				this.danmuList = res.data.list
			})
		},
		// 调取首页温馨提示图片弹框接口
		getPopup() {
			this.$http('/setting/popup', 'GET',).then(res => {
				this.popupSetting = res.data.setting
			})
		},
		// 关闭方法
		closePopup() {
			uni.setStorageSync('popup_' + this.popupSetting.number, 1)
			this.isShowPopupKey = false
		},
		closeCouponPopup() {
			uni.setStorageSync('coupon_popup' + this.$store.getters.setting.coupon_popup.number, 1)
			this.isShowCouponPopupKey = false
		},
		change(e) {
			this.current = e.detail.current;
		},
		clickItem(e) {
			this.swiperDotIndex = e
		},
		// 启动自动播放
		startAutoPlay() {
			this.autoPlayInterval = setInterval(() => {
				// 每隔一定时间切换到下一个轮播图
				this.current = (this.current + 1) % this.info.length;
			}, 3000); // 3000毫秒（3秒）为轮播间隔，可以根据需求调整
		},
		// 停止自动播放
		stopAutoPlay() {
			if (this.autoPlayInterval) {
				clearInterval(this.autoPlayInterval);
				this.autoPlayInterval = null;
			}
		},
		// 一元夺宝
		treasure() {
			uni.navigateTo({
				url: '/pages/center/assignment'
				//url: '/pages/TreasureHunt/index'
			})
		},
		selectHome() {
			this.$http('/activity-img/selectHome', 'GET').then(res => {
				this.activityImg = res.data.data.url
			})
		}

	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
}
</script>

<style lang="scss" scoped>
page {
	background-color: #151515;
}

.container {
	height: 100vh;
	box-sizing: border-box;
	position: relative;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明黑色背景 */
	z-index: 1001;
	/* 确保遮罩层位于最顶层 */
}

.qr-code-popup {
	width: 75%;
	height: 700rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1005;
	background-image: url('https://zsw-bimface-res2.izsw.net/img/bim-community/%E5%BC%B9%E5%87%BA%E6%A1%86.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.erweima {
		width: 350rpx;
		height: 350rpx;
		//background: url(../../static/manghe/pay.png) center/cover no-repeat;
		position: absolute;
		top: 55%;
		left: 53%;
		transform: translate(-50%, -50%);
	}

	.closed {
		position: absolute;
		top: -100rpx;
		right: 0;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.collect {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 35rpx;
		color: #fff;
		font-weight: bold;
		background-color: #cfcf00;
		border-radius: 100rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.win {
		width: 52%;
		height: 50rpx;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		background: linear-gradient(to bottom, rgb(255, 129, 78), rgb(255, 166, 59));
		border-radius: 100rpx;
		position: absolute;
		right: 0;
		top: 110rpx;
	}
}

.popu {
	width: 75%;
	height: 700rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 101;
	background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240325085122.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.pick-up-item {
		width: 60%;
		height: 170rpx;
		margin: 70rpx auto 0;
		background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240325085130.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;

		.top {
			width: 100%;
			height: 100rpx;
			position: absolute;
			top: 0;
			display: flex;

			.left {
				width: 40%;
				color: red;
				text-align: center;
				font-size: 60rpx;
				font-weight: bold;
				line-height: 100rpx;
			}

			.right {
				width: 60%;
				display: flex;
				flex-wrap: wrap;
				align-content: center;

				.manjian {
					color: red;
				}

				.youhui {
					font-size: 24rpx;
					color: #757770;
				}
			}
		}

		.bottom {
			position: absolute;
			bottom: 0;
			right: 20rpx;
			width: 100%;
			height: 60rpx;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #fff;

			.right {
				width: 30rpx;
				height: 30rpx !important;
				position: absolute;
				bottom: 22rpx;
				right: 85rpx;
			}
		}
	}

	.free-offer {
		width: 60%;
		height: 80rpx;
		font-weight: bold;
		background-color: yellow;
		line-height: 80rpx;
		font-size: 35rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		border-radius: 100rpx;
		transform: translateX(-50%);
		bottom: 85rpx;
	}

	.bottom {
		width: 100%;
		height: 50rpx;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;

		image {
			width: 70rpx;
			height: 70rpx;
			margin-top: 80rpx !important;
		}

	}
}

.swiper-box {
	height: 350rpx;
	width: 90%;
	margin: 130rpx auto 0;
	border-radius: 15rpx;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	margin-top: 100rpx;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200px;
	color: #fff;
}

.snatch-treasure {
	height: 230rpx;
	width: 90%;
	margin: 20rpx auto;
	border-radius: 15rpx;
	overflow: hidden;
	background-color: antiquewhite;
	position: relative;

	image {
		width: 100%;
		height: 100%;
	}

	.raiders {
		position: absolute;
		top: 0rpx;
		left: 50rpx;
		font-weight: 900;
		font-size: 70rpx;
		color: transparent;
		/* 设置文字颜色为透明，用于让渐变背景显现 */
		background: linear-gradient(to bottom, yellow, red);
		/* 设置背景渐变，从上到下从黄色到红色 */
		-webkit-background-clip: text;
		/* 用于保持文字部分显示背景，使渐变作用于文字 */
	}

	.convert {
		position: absolute;
		top: 90rpx;
		left: 50rpx;
		font-weight: 900;
		font-size: 34rpx;
		color: red;
	}

	.raiders-btn {
		width: 240rpx;
		height: 78rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50rpx;
		border-radius: 100rpx;
		text-align: center;
		font-weight: 900;
		font-size: 33rpx;
		line-height: 78rpx;
		color: red;
		background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E7%BB%84%203656@3x.png');
		background-size: cover;
		/* 设置图像在容器中的尺寸，cover 表示保持宽高比例的同时覆盖整个容器 */
		background-repeat: no-repeat;
	}
}
</style>